<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
</head>
<body>
    <script>
        // 创建3D场景对象Scene
        const scene = new THREE.Scene();

        const width = window.innerWidth;
        const height = window.innerHeight;
        // 实例化一个透视投影相机对象
        const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
          //相机在Three.js三维坐标系中的位置
        // 根据需要设置相机位置具体值
         camera.position.set(0,0,200);
         camera.lookAt(new THREE.Vector3(0,0,0));
         // 创建渲染器对象Renderer
         const renderer = new THREE.WebGLRenderer();
         // 设置渲染器的尺寸
        renderer.setSize(width,height);
        // 将渲染器中的内容添加到body中
        document.body.appendChild(renderer.domElement);
        renderer.setClearColor(0xffffff);
       
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(2000, 8000, 4000);
        scene.add(spotLight);
        createSystemSprite();
        //创建一个基础的粒子

        function createSystemSprite(){
            const geometry = new THREE.Geometry();
            const material = new THREE.PointCloudMaterial({
                size: 4,
                vertexColors: true,
            })
            for(let i = -5; i < 5; i++){
                for(let j = -5; j < 5; j++){
                    geometry.vertices.push(new THREE.Vector3(i*10,j*10,0));
                    geometry.colors.push(new THREE.Color(Math.random()*0xffffff));
                }
            }
            scene.add(new THREE.PointCloud(geometry,material));
        }

        const animation = ()=>{
             // 使用渲染器，通过相机将场景渲染进来
            renderer.render(scene,camera);
            requestAnimationFrame(animation);
        }
        animation()
    </script>
</body>
</html>